<template>
  <div class="index">
    <div class="SCcard">
      <div class="dataFormTitle">在线控制内置效果</div>
      <div class="onlineControl">
        <div class="onlineControlItems">
          <div class="onlineControlItemsTitle">播放节目</div>
          <div class="onlineControlItemsCont">
            <el-select v-model="programValue"
                       placeholder="请选择"
                       style="width: 100px;"
                       @change="doPlayShow(programValue)">
              <el-option v-for="item in programOptions"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
          </div>
        </div>
        <div class="onlineControlItems">
          <div class="onlineControlItemsTitle">播放速度</div>
          <div class="onlineControlItemsCont">
            <el-slider v-model="demonstration"
                       style="width:100px"
                       :max="16"
                       @change="doPlaySpeed(demonstration)"></el-slider>
          </div>
          <div style="margin-left: -33px;margin-right: 30px;">{{demonstration}}</div>
        </div>
        <div class="onlineControlItems">
          <div class="onlineControlItemsTitle">重启分控</div>
          <div class="onlineControlItemsCont">
            <el-select v-model="subSontrolOptionsValue"
                       placeholder="请选择"
                       style="width:120px">
              <el-option v-for="item in subSontrolOptions"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
          </div>
        </div>
        <div class="onlineControlItems">
          <div class="onlineControlItemsTitle"
               style="margin-right: 25px;">IC型号</div>
          <div class="onlineControlItemsCont">
            <el-select v-model="ICValue"
                       placeholder="请选择"
                       style="width: 100px;"
                       @change="doSetIC(ICValue)">
              <el-option v-for="item in ICOptions"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
          </div>
        </div>
        <div class="onlineControlItems">
          <div class="onlineControlItemsTitle"
               style="margin-right: 25px;">通道数</div>
          <div class="onlineControlItemsCont">
            <el-select v-model="passNumValue"
                       placeholder="请选择"
                       style="width: 100px;"
                       @change="doSetChn(passNumValue)">
              <el-option v-for="item in passNumOptions"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
          </div>
        </div>
      </div>
      <div class="passLight"
           style="width:670px;height:400px;margin-top: 120px">
        <div style="height:50px;font-size:18px;background-color:rgb(241, 241, 241);">调光</div>
        <div class="tdleight">
          <div style="width:260px;height:300px;margin-right:50px">
            <div class="LeightBlock">
              <div class="LeightBlockTitle">红</div>
              <div class="ledRed">
                <el-slider v-model="leightRed"
                           :max="255"
                           style="width:200px"
                           @change="doSetColorRed(leightRed)"></el-slider>
              </div>
            </div>
            <div class="LeightBlock">
              <div class="LeightBlockTitle">绿</div>
              <div class="ledGreen">
                <el-slider v-model="leightGreen"
                           :max="255"
                           style="width:200px"
                           @change="doSetColorGreen(leightGreen)"></el-slider>
              </div>
            </div>
            <div class="LeightBlock">
              <div class="LeightBlockTitle">蓝</div>
              <div class="ledBlue">
                <el-slider v-model="leightBlue"
                           :max="255"
                           style="width:200px"
                           @change="doSetColorBlue(leightBlue)"></el-slider>
              </div>
            </div>
            <div class="LeightBlock">
              <div class="LeightBlockTitle">白</div>
              <div class="ledWhite">
                <el-slider v-model="leightWhite"
                           :max="255"
                           style="width:200px"
                           @change="doSetColorWhite(leightWhite)"></el-slider>
              </div>
            </div>
            <div class="LeightBlock">
              <div class="LeightBlockTitle">黑</div>
              <div class="ledBlack">
                <el-slider v-model="leightBlack"
                           :max="255"
                           style="width:200px"
                           @change="doSetColorBlack(leightBlack)"></el-slider>
              </div>
              <div style="font-size: 14px;position: relative;top: 12px;width: 280px;">注：这里只做调光测试，设备不记忆</div>
            </div>
          </div>
          <div style="width:220px;height:300px;">
            <div class="block">
              <div style="font-size: 24px;">点击设置调光参数</div>
              <div>
                <el-color-picker v-model="demonstrationColor"
                                 @change="doSetColor(demonstrationColor)"></el-color-picker>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="SCcard"
         style="position: relative;top: 145px;">
      <div style="height:50px;line-height:50px;font-size:18px;background-color:rgb(241, 241, 241)">场景控制</div>
      <div class="sceneController"
           style="width:180px;height:400px;background-color:#f5f5f5">
        <div class="sceneControllerItems"
             @click="doPlay()">播放</div>
        <div class="sceneControllerItems"
             @click="doPause()">暂停</div>
        <div class="sceneControllerItems">重启</div>
      </div>
    </div>
  </div>
</template>

<script>
import * as sysTool from '../../../../../js/systemTool'
import * as cookie from '../../../../../js/cookie'
export default {
  name: 'index',
  data () {
    return {
      hello: 'hello',
      programOptions: [{ // subSontrolOptions
        value: 0,
        label: '节目1'
      }, {
        value: 1,
        label: '节目2'
      }, {
        value: 2,
        label: '节目3'
      }],
      programValue: '节目1',
      ICOptions: [{ // subSontrolOptions
        value: 0,
        label: 'DMX'
      }, {
        value: 1,
        label: 'CDX'
      }, {
        value: 2,
        label: 'RUX'
      }],
      ICValue: 'DMX',
      passNumOptions: [{ // subSontrolOptions
        value: 0,
        label: '1'
      }, {
        value: 1,
        label: '2'
      }, {
        value: 2,
        label: '3'
      }],
      passNumValue: '1',
      demonstration: 16,
      demonstrationColor: '#ffffff',
      subSontrolOptions: [{ // subSontrolOptions
        value: 0,
        label: '所有分控'
      }, {
        value: 1,
        label: '分控1'
      }, {
        value: 2,
        label: '分控2'
      }],
      subSontrolOptionsValue: '所有分控',
      leightRed: 255,
      leightGreen: 255,
      leightBlue: 255,
      leightWhite: 255,
      leightBlack: 255
    }
  },
  created () {
    this.brower = sysTool.GetCurrentBrowser()
    this.os = sysTool.GetOs()
    this.username = cookie.getCookie('userAccountNumber')
    this.password = cookie.getCookie('userAccountPassword')
  },
  methods: {
    postData (postData) {
      var data = {
        Method: postData.Method,
        Name: this.username,
        Password: this.password,
        Device_ID: this.os,
        Platform: this.brower,
        DevID: postData.DevID,
        Arg: postData.Arg,
        Color: postData.Color
      }
      console.log(data)
      var msg = JSON.stringify(data)
      var data2 = new FormData()
      data2.append(postData.FormData, msg)
      let url = postData.Url
      this.axios.post(url, data2).then((res) => {
        var resl = res.data
        if (resl.Result === 'OK') {
          this.$message({
            message: res.data.Message,
            type: 'success'
          })
          this.init()
        } else {
          this.$message({
            message: res.data.Message,
            type: 'error'
          })
        }
      })
    },
    // 播放
    doPlay () {
      var data = {
        Method: 'DoPlay',
        DevID: 'XB0019000001',
        FormData: 'DoPauseForm',
        Url: 'api/test/test.php'
      }
      this.postData(data)
      // var data = {
      //   Method: 'DoPlay',
      //   Name: this.username,
      //   Password: this.password,
      //   Device_ID: this.os,
      //   Platform: this.brower,
      //   DevID: 'XB0019000001'
      // }
      // var msg = JSON.stringify(data)
      // var data2 = new FormData()
      // data2.append('content', msg)
      // let url = 'api/test/test.php'
      // this.axios.post(url, data2).then((res) => {
      //   var resl = res.data
      //   if (resl.Result === 'OK') {
      //     this.$message({
      //       message: res.data.Message,
      //       type: 'success'
      //     })
      //     this.init()
      //   } else {
      //     this.$message({
      //       message: res.data.Message,
      //       type: 'error'
      //     })
      //   }
      // })
    },
    // 暂停
    doPause () {
      var data = {
        Method: 'DoPause',
        DevID: 'XB0019000001',
        FormData: 'DoPauseForm',
        Url: 'api/test/test.php'
      }
      this.postData(data)
      // var data = {
      //   Method: 'DoPause',
      //   Name: this.username,
      //   Password: this.password,
      //   Device_ID: this.os,
      //   Platform: this.brower,
      //   DevID: 'XB0019000001'
      // }
      // var msg = JSON.stringify(data)
      // var data2 = new FormData()
      // data2.append('content', msg)
      // let url = 'api/test/test.php'
      // this.axios.post(url, data2).then((res) => {
      //   var resl = res.data
      //   if (resl.Result === 'OK') {
      //     this.$message({
      //       message: res.data.Message,
      //       type: 'success'
      //     })
      //     this.init()
      //   } else {
      //     this.$message({
      //       message: res.data.Message,
      //       type: 'error'
      //     })
      //   }
      // })
    },
    // 播放节目
    doPlayShow (programValue) {
      var data = {
        Method: 'DoPlayShow',
        DevID: 'XB0019000001',
        FormData: 'DoPauseForm',
        Url: 'api/test/test.php',
        Arg: programValue
      }
      this.postData(data)
      // console.log(programValue)
      // var data = {
      //   Method: 'DoPlayShow',
      //   Name: this.username,
      //   Password: this.password,
      //   Device_ID: this.os,
      //   Platform: this.brower,
      //   DevID: 'XB0019000001',
      //   Arg: programValue
      // }
      // var msg = JSON.stringify(data)
      // var data2 = new FormData()
      // data2.append('content', msg)
      // let url = 'api/test/test.php'
      // this.axios.post(url, data2).then((res) => {
      //   var resl = res.data
      //   if (resl.Result === 'OK') {
      //     this.$message({
      //       message: res.data.Message,
      //       type: 'success'
      //     })
      //     this.init()
      //   } else {
      //     this.$message({
      //       message: res.data.Message,
      //       type: 'error'
      //     })
      //   }
      // })
    },
    // 播放速度
    doPlaySpeed (demonstration) {
      var data = {
        Method: 'DoPlaySpeed',
        DevID: 'XB0019000001',
        FormData: 'DoPauseForm',
        Url: 'api/test/test.php',
        Arg: demonstration
      }
      this.postData(data)
      // console.log(demonstration)
      // var data = {
      //   Method: 'DoPlaySpeed',
      //   Name: this.username,
      //   Password: this.password,
      //   Device_ID: this.os,
      //   Platform: this.brower,
      //   DevID: 'XB0019000001',
      //   Arg: demonstration
      // }
      // var msg = JSON.stringify(data)
      // var data2 = new FormData()
      // data2.append('content', msg)
      // let url = 'api/test/test.php'
      // this.axios.post(url, data2).then((res) => {
      //   var resl = res.data
      //   if (resl.Result === 'OK') {
      //     this.$message({
      //       message: res.data.Message,
      //       type: 'success'
      //     })
      //     this.init()
      //   } else {
      //     this.$message({
      //       message: res.data.Message,
      //       type: 'error'
      //     })
      //   }
      // })
    },
    // 重启分控
    doRebootS (subSontrolOptionsValue) {
      var data = {
        Method: 'DoRebootS',
        DevID: 'XB0019000001',
        FormData: 'DoPauseForm',
        Url: 'api/test/test.php',
        Arg: subSontrolOptionsValue
      }
      this.postData(data)
      // var data = {
      //   Method: 'DoRebootS',
      //   Name: this.username,
      //   Password: this.password,
      //   Device_ID: this.os,
      //   Platform: this.brower,
      //   DevID: 'XB0019000001',
      //   Arg: subSontrolOptionsValue
      // }
      // var msg = JSON.stringify(data)
      // var data2 = new FormData()
      // data2.append('content', msg)
      // let url = 'api/test/test.php'
      // this.axios.post(url, data2).then((res) => {
      //   var resl = res.data
      //   if (resl.Result === 'OK') {
      //     this.$message({
      //       message: res.data.Message,
      //       type: 'success'
      //     })
      //     this.init()
      //   } else {
      //     this.$message({
      //       message: res.data.Message,
      //       type: 'error'
      //     })
      //   }
      // })
    },
    // IC型号
    doSetIC (ICValue) {
      var data = {
        Method: 'DoSetIC',
        DevID: 'XB0019000001',
        FormData: 'DoPauseForm',
        Url: 'api/test/test.php',
        Arg: ICValue
      }
      this.postData(data)
      // var data = {
      //   Method: 'DoSetIC',
      //   Name: this.username,
      //   Password: this.password,
      //   Device_ID: this.os,
      //   Platform: this.brower,
      //   DevID: 'XB0019000001',
      //   IC: ICValue
      // }
      // var msg = JSON.stringify(data)
      // var data2 = new FormData()
      // data2.append('content', msg)
      // let url = 'api/test/test.php'
      // this.axios.post(url, data2).then((res) => {
      //   var resl = res.data
      //   if (resl.Result === 'OK') {
      //     this.$message({
      //       message: res.data.Message,
      //       type: 'success'
      //     })
      //     this.init()
      //   } else {
      //     this.$message({
      //       message: res.data.Message,
      //       type: 'error'
      //     })
      //   }
      // })
    },
    // 通道数
    doSetChn (passNumValue) {
      var data = {
        Method: 'DoSetChn',
        DevID: 'XB0019000001',
        FormData: 'DoPauseForm',
        Url: 'api/test/test.php',
        Arg: passNumValue
      }
      this.postData(data)
      // var data = {
      //   Method: 'DoSetChn',
      //   Name: this.username,
      //   Password: this.password,
      //   Device_ID: this.os,
      //   Platform: this.brower,
      //   DevID: 'XB0019000001',
      //   Chn: passNumValue
      // }
      // var msg = JSON.stringify(data)
      // var data2 = new FormData()
      // data2.append('content', msg)
      // let url = 'api/test/test.php'
      // this.axios.post(url, data2).then((res) => {
      //   var resl = res.data
      //   if (resl.Result === 'OK') {
      //     this.$message({
      //       message: res.data.Message,
      //       type: 'success'
      //     })
      //     this.init()
      //   } else {
      //     this.$message({
      //       message: res.data.Message,
      //       type: 'error'
      //     })
      //   }
      // })
    },
    // 颜色
    doSetColor (color) {
      var data = {
        Method: 'DoSetColor',
        DevID: 'XB0019000001',
        FormData: 'DoPauseForm',
        Url: 'api/test/test.php',
        Color: color
      }
      this.postData(data)
      // var data = {
      //   Method: 'DoSetColor',
      //   Name: this.username,
      //   Password: this.password,
      //   Device_ID: this.os,
      //   Platform: this.brower,
      //   DevID: 'XB0019000001',
      //   color: color
      // }
      // var msg = JSON.stringify(data)
      // var data2 = new FormData()
      // data2.append('content', msg)
      // let url = 'api/test/test.php'
      // this.axios.post(url, data2).then((res) => {
      //   var resl = res.data
      //   if (resl.Result === 'OK') {
      //     this.$message({
      //       message: res.data.Message,
      //       type: 'success'
      //     })
      //     this.init()
      //   } else {
      //     this.$message({
      //       message: res.data.Message,
      //       type: 'error'
      //     })
      //   }
      // })
    },
    doSetColorRed (color) {
      var data = {
        Method: 'DoSetColorRed',
        DevID: 'XB0019000001',
        FormData: 'DoPauseForm',
        Url: 'api/test/test.php',
        Color: color
      }
      this.postData(data)
      // var data = {
      //   Method: 'DoSetColorRed',
      //   Name: this.username,
      //   Password: this.password,
      //   Device_ID: this.os,
      //   Platform: this.brower,
      //   DevID: 'XB0019000001',
      //   color: color
      // }
      // var msg = JSON.stringify(data)
      // var data2 = new FormData()
      // data2.append('content', msg)
      // let url = 'api/test/test.php'
      // this.axios.post(url, data2).then((res) => {
      //   var resl = res.data
      //   if (resl.Result === 'OK') {
      //     this.$message({
      //       message: res.data.Message,
      //       type: 'success'
      //     })
      //     this.init()
      //   } else {
      //     this.$message({
      //       message: res.data.Message,
      //       type: 'error'
      //     })
      //   }
      // })
    },
    doSetColorGreen (color) {
      var data = {
        Method: 'DoSetColorGreen',
        DevID: 'XB0019000001',
        FormData: 'DoPauseForm',
        Url: 'api/test/test.php',
        Color: color
      }
      this.postData(data)
      // var data = {
      //   Method: 'DoSetColorGreen',
      //   Name: this.username,
      //   Password: this.password,
      //   Device_ID: this.os,
      //   Platform: this.brower,
      //   DevID: 'XB0019000001',
      //   color: color
      // }
      // var msg = JSON.stringify(data)
      // var data2 = new FormData()
      // data2.append('content', msg)
      // let url = 'api/test/test.php'
      // this.axios.post(url, data2).then((res) => {
      //   var resl = res.data
      //   if (resl.Result === 'OK') {
      //     this.$message({
      //       message: res.data.Message,
      //       type: 'success'
      //     })
      //     this.init()
      //   } else {
      //     this.$message({
      //       message: res.data.Message,
      //       type: 'error'
      //     })
      //   }
      // })
    },
    doSetColorBlue (color) {
      var data = {
        Method: 'DoSetColorBlue',
        DevID: 'XB0019000001',
        FormData: 'DoPauseForm',
        Url: 'api/test/test.php',
        Color: color
      }
      this.postData(data)
      // var data = {
      //   Method: 'DoSetColorBlue',
      //   Name: this.username,
      //   Password: this.password,
      //   Device_ID: this.os,
      //   Platform: this.brower,
      //   DevID: 'XB0019000001',
      //   color: color
      // }
      // var msg = JSON.stringify(data)
      // var data2 = new FormData()
      // data2.append('content', msg)
      // let url = 'api/test/test.php'
      // this.axios.post(url, data2).then((res) => {
      //   var resl = res.data
      //   if (resl.Result === 'OK') {
      //     this.$message({
      //       message: res.data.Message,
      //       type: 'success'
      //     })
      //     this.init()
      //   } else {
      //     this.$message({
      //       message: res.data.Message,
      //       type: 'error'
      //     })
      //   }
      // })
    },
    doSetColorWhite (color) {
      var data = {
        Method: 'DoSetColorWhite',
        DevID: 'XB0019000001',
        FormData: 'DoPauseForm',
        Url: 'api/test/test.php',
        Color: color
      }
      this.postData(data)
      // var data = {
      //   Method: 'DoSetColorWhite',
      //   Name: this.username,
      //   Password: this.password,
      //   Device_ID: this.os,
      //   Platform: this.brower,
      //   DevID: 'XB0019000001',
      //   color: color
      // }
      // var msg = JSON.stringify(data)
      // var data2 = new FormData()
      // data2.append('content', msg)
      // let url = 'api/test/test.php'
      // this.axios.post(url, data2).then((res) => {
      //   var resl = res.data
      //   if (resl.Result === 'OK') {
      //     this.$message({
      //       message: res.data.Message,
      //       type: 'success'
      //     })
      //     this.init()
      //   } else {
      //     this.$message({
      //       message: res.data.Message,
      //       type: 'error'
      //     })
      //   }
      // })
    },
    doSetColorBlack (color) {
      var data = {
        Method: 'DoSetColorBlack',
        DevID: 'XB0019000001',
        FormData: 'DoPauseForm',
        Url: 'api/test/test.php',
        Color: color
      }
      this.postData(data)
      // var data = {
      //   Method: 'DoSetColorBlack',
      //   Name: this.username,
      //   Password: this.password,
      //   Device_ID: this.os,
      //   Platform: this.brower,
      //   DevID: 'XB0019000001',
      //   color: color
      // }
      // var msg = JSON.stringify(data)
      // var data2 = new FormData()
      // data2.append('content', msg)
      // let url = 'api/test/test.php'
      // this.axios.post(url, data2).then((res) => {
      //   var resl = res.data
      //   if (resl.Result === 'OK') {
      //     this.$message({
      //       message: res.data.Message,
      //       type: 'success'
      //     })
      //     this.init()
      //   } else {
      //     this.$message({
      //       message: res.data.Message,
      //       type: 'error'
      //     })
      //   }
      // })
    }
  }
}
</script>

<style scoped>
.dataFormTitle {
  font-size: 18px;
  margin-bottom: 20px;
}
.onlineControl {
  float: left;
  width: 690px;
  height: 110px;
}
.onlineControlItems div {
  float: left;
  height: 40px;
  line-height: 40px;
  margin-bottom: 10px;
}
.onlineControlItemsTitle {
  margin-right: 10px;
}
.onlineControlItemsCont {
  margin-right: 45px;
}
.SCcard {
  float: left;
}
.tdleight {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 670px;
  height: 420px;
  background-color: #f5f5f5;
}
.LeightBlockTitle {
  margin-right: 20px;
}
.LeightBlock div {
  height: 40px;
  line-height: 40px;
  float: left;
}
.sceneControllerItems {
  float: left;
  width: 180px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}
</style>
<style>
.el-card {
  height: 650px;
}
.el-col-4 {
  margin-right: 30px;
  width: 18%;
}
.el-radio-group {
  width: 200px;
}
.el-radio-group label {
  margin-bottom: 6px;
}
.el-color-picker__trigger {
  height: 200px;
  width: 200px;
}
.ledRed .el-slider__bar {
  background-color: red;
}
.ledGreen .el-slider__bar {
  background-color: green;
}
.ledBlue .el-slider__bar {
  background-color: blue;
}
.ledBlack .el-slider__bar {
  background-color: black;
}
.ledWhite .el-slider__bar {
  background-color: white;
}
</style>
